<div fxFill fxLayout="row" fxLayoutAlign="space-between center">

  <mat-form-field fxFlex="25" fxFlex.lt-lg="47">
    <mat-select
      (selectionChange)="onLastPeriodSelected()"
      [(ngModel)]="lastPeriodViewed"
      placeholder="Last">
      <mat-option
        *ngFor="let lastPeriod of lastPeriods;"
        [value]="lastPeriod">
        {{lastPeriod.label}}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <span fxFlex="1"></span>

  <mat-form-field fxFlex="29" fxFlex.lt-lg="25.5">
    <input (dateChange)="onDateToDateChange()"
           [(ngModel)]="periodViewed.from"
           [matDatepicker]="datePickerFrom"
           [max]="periodViewed.to"
           [min]="dateMin"
           matInput
           placeholder="From">
    <mat-datepicker-toggle [for]="datePickerFrom" matSuffix></mat-datepicker-toggle>
    <mat-datepicker #datePickerFrom></mat-datepicker>
  </mat-form-field>

  <span fxFlex="1"></span>

  <mat-form-field fxFlex="29" fxFlex.lt-lg="25.5">
    <input (dateChange)="onDateToDateChange()"
           [(ngModel)]="periodViewed.to"
           [matDatepicker]="datePickerTo"
           [max]="dateMax"
           [min]="periodViewed.from"
           matInput
           placeholder="To">
    <mat-datepicker-toggle [for]="datePickerTo" matSuffix></mat-datepicker-toggle>
    <mat-datepicker #datePickerTo></mat-datepicker>
  </mat-form-field>

  <span fxFlex="3"></span>

  <button (click)="onConfigClicked()" color="primary" mat-icon-button
          matTooltip="Configure Fitness Trend">
    <mat-icon fontSet="material-icons-outlined">settings</mat-icon>
  </button>

  <span fxFlex="3"></span>

  <button (click)="onShowInfo()" color="primary" mat-icon-button
          matTooltip="Fitness Trend User Guide">
    <mat-icon fontSet="material-icons-outlined">support</mat-icon>
  </button>

</div>

<div class="fromToPeriod" fxFill fxLayout="row" fxLayoutAlign="space-between center">

  <mat-slide-toggle (change)="onTrainingZonesToggle()"
                    [(ngModel)]="isTrainingZonesEnabled"
                    [disabled]="(fitnessTrendConfigModel.heartRateImpulseMode === HeartRateImpulseMode.TRIMP)"
                    matTooltip="{{(fitnessTrendConfigModel.heartRateImpulseMode === HeartRateImpulseMode.TRIMP) ?
					  'Training Zones are disabled when heart rate stress calculation method is set to TRIMP (Training Impulse). Because TRIMP scores are not optimized to be use with Training Zones. You should switch to the HRSS (Heart Rate Stress Score) method instead which is recommended. The feature helper explains why... (click <?> icon to open it). You can switch to HRSS method in feature settings (click <cog> icon).' :
					  'Enable training zones'}}">
    <mat-icon fontSet="material-icons-outlined">power_input</mat-icon>
  </mat-slide-toggle>

  <mat-slide-toggle (change)="onPowerMeterToggle()"
                    [(ngModel)]="isPowerMeterEnabled"
                    [disabled]="(fitnessTrendConfigModel.heartRateImpulseMode === HeartRateImpulseMode.TRIMP)"
                    matTooltip="{{(fitnessTrendConfigModel.heartRateImpulseMode === HeartRateImpulseMode.TRIMP) ?
					  'Use of cycling power data is disabled when heart rate stress calculation method is set to TRIMP (Training Impulse). Indeed TRIMP scores aren\'t comparable with PSS (Power Stress Score). You should switch to the HRSS (Heart Rate Stress Score) method instead (click on <cog> icon to switch to HRSS method).' :
					  'Enable use of cycling power data if available on your rides. When enabled, the fitness trend will use & display rides\' PSS (Power Stress Scores). These scores are calculated from activities\' power data. ⚠️ PSS can be calculated only if you properly set your cycling FTP in dated athlete settings.'}}">
    <mat-icon fontSet="material-icons-outlined">flash_on</mat-icon>
  </mat-slide-toggle>

  <mat-slide-toggle (change)="onSwimToggle()"
                    [(ngModel)]="isSwimEnabled"
                    [disabled]="(fitnessTrendConfigModel.heartRateImpulseMode === HeartRateImpulseMode.TRIMP)"
                    matTooltip="{{(fitnessTrendConfigModel.heartRateImpulseMode === HeartRateImpulseMode.TRIMP) ?
					  'Swimming Stress Scores (SSS) are not used in fitness trend calculation when heart rate stress calculation method is set to TRIMP (Training Impulse). Because TRIMP scores compared to SSS scores is not fully reliable. You should switch to the HRSS (Heart Rate Stress Score) method instead which is recommended. The feature helper explains why... (click <?> icon to open it). You can switch to HRSS method in feature settings (click <cog> icon).' :
					  'Enable SSS (Swimming Stress Score) on swimming activities. ⚠️ SSS can be calculated only if you properly set your swim FTP in dated athlete settings'}}">
    <mat-icon fontSet="material-icons-outlined">pool</mat-icon>
  </mat-slide-toggle>

  <mat-slide-toggle (change)="onEBikeRidesEnabledToggle()"
                    [(ngModel)]="isEBikeRidesEnabled"
                    matTooltip="Include electrical assisted rides">
    <mat-icon fontSet="material-icons-outlined">battery_charging_full</mat-icon>
  </mat-slide-toggle>

  <mat-slide-toggle
    (change)="onEstimatedPowerStressScoreToggle()"
    [(ngModel)]="isEstimatedPowerStressScoreEnabled"
    [disabled]="!isPowerMeterEnabled || fitnessTrendConfigModel.heartRateImpulseMode === HeartRateImpulseMode.TRIMP"
    matTooltip="{{(fitnessTrendConfigModel.heartRateImpulseMode === HeartRateImpulseMode.TRIMP) ?
					  'Use of estimated cycling power data is disabled when heart rate stress calculation method is set to TRIMP (Training Impulse). Indeed TRIMP scores aren\'t comparable with estimated PSS (Power Stress Score). You should switch to the HRSS (Heart Rate Stress Score) method instead (click on <cog> icon to switch to HRSS method).' :
					  ((isPowerMeterEnabled) ? 'Enable use of estimated cycling power data if available on your rides. When enabled, the fitness trend will use & display rides\' estimated PSS (Power Stress Scores). These scores are calculated from activities\' estimated power data. ⚠️ PSS can be calculated only if you properly set your cycling FTP in dated athlete settings with your weight.': 'Please enable use of cycling power data to enable the estimated.')}}">
    <mat-icon [inline]="true" fontSet="material-icons-outlined">graphic_eq</mat-icon>
    <mat-icon [inline]="true" fontSet="material-icons-outlined">flash_on</mat-icon>
  </mat-slide-toggle>

  <mat-slide-toggle
    (change)="onEstimatedRunningStressScoreToggle()"
    [(ngModel)]="isEstimatedRunningStressScoreEnabled"
    [disabled]="fitnessTrendConfigModel.heartRateImpulseMode === HeartRateImpulseMode.TRIMP"
    matTooltip="{{(fitnessTrendConfigModel.heartRateImpulseMode === HeartRateImpulseMode.TRIMP) ?
					  'Use of estimated RSS (Running Stress Score) is disabled when heart rate stress calculation method is set to TRIMP (Training Impulse). Indeed TRIMP scores aren\'t comparable with estimated RSS. You should switch to the HRSS (Heart Rate Stress Score) method instead (click on <cog> icon to switch to HRSS method).' :
					  'Enable estimated RSS (Running Stress Score). When enabled, the fitness trend will use & display runs\' estimated RSS. These scores are calculated from activities\' pace & time data. ⚠️ RSS can be calculated only if you properly set your running FTP in dated athlete settings.'}}">
    <mat-icon [inline]="true" fontSet="material-icons-outlined">graphic_eq</mat-icon>
    <mat-icon [inline]="true" fontSet="material-icons-outlined">directions_run</mat-icon>
  </mat-slide-toggle>

</div>
